<template>
    <div class="simiitem">
        <!-- 图片 -->
        <div class="item-img" @click="gotoMV">
            <img :src="props.simList.cover || props.simList.coverUrl" alt="">
            <div class="play-icon">
                <span class="iconfont icon-24gl-playCircle"></span>
                <span>{{ instance.proxy.$formatNums.formatNum(playCount) }}</span>
            </div>
            <div class="play-duration">
                <span>{{ instance.proxy.$formatDuration.formatDurations(playDuration) }}</span>
            </div>
        </div>

        <!-- 右侧介绍 -->
        <div class="item-text">
            <div class="tname">{{ videoTitle }}</div>
            <div class="aname"> by {{ creater }}</div>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const instance = getCurrentInstance()
const route = useRoute()
const router = useRouter()
const type = route.params.type
const props = defineProps({
    simList: {
        type: Object,
        default: {}
    },
    type: {
        type: String,
        default: ''
    },

})
//播放量
const playCount = computed(() => {
    return props.simList.playCount || props.simList.playTime
})
//播放时长
const playDuration = computed(() => {
    return props.simList.duration || props.simList.durationms
})
//视频创作者
const creater = computed(() => {
    return props.simList.artistName || props.simList.creator[0].userName
})
//视频标题
const videoTitle = computed(() => {
    return props.simList.name || props.simList.title
})

//点击某个相似视频
function gotoMV() {
    if (type == 'mv') {
        router.push({
            name: 'Videodetail',
            params: { id: props.simList.id, type: 'mv' }
        })
    } else if (type == 'video') {
        router.push({
            name: 'Videodetail',
            params: { id: props.simList.vid, type: 'video' }
        })
    }
}

</script>

<style lang="scss" scoped>
.simiitem {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    height: 100%;

    .item-img {
        width: 37%;
        height: 100%;
        position: relative;

        img {
            width: 160px;
            height: 100px;
        }

        .play-icon {
            display: flex;
            align-items: center;
            position: absolute;
            right: 15px;
            top: 0px;
            color: white;
            font-size: 10px;

            span {
                margin-left: 5px;
            }
        }

        .play-duration {
            position: absolute;
            bottom: 5px;
            right: 15px;
            color: white;
            font-size: 10px;
        }
    }

    .item-text {
        .aname {
            margin-top: 30px;
            font-size: 10px;
            color: #999999;
        }
    }
}
</style>